<template>
 <el-card class="box-card">
      <div slot="header" style="text-align:left">
          <span >分类树</span>
          <el-button style="float: right; padding: 3px 0" @click="() => (dialog=true,doData=null)"  type="text">添加根节点</el-button>
      </div>
<div class="custom-tree-container">
  <div class="block">
    <el-tree :data="data"  node-key="id" :expand-on-click-node="false">
     
      <span class="custom-tree-node" slot-scope="{ node, data }" >
              
               <span > 
                  <img width=10 height=10 :src="baseImage+data.icon"/>
                   {{node.label}}
                </span>
               <span>
                <el-button
                  type="text"
                  size="mini"
                  @click="() =>(dialog=true,doData=data,modifyParam={'name':''})">
                  添加
                </el-button>
                <el-button
                  type="text"
                  size="mini"
                  @click="() => update(node, data)">
                  修改
                </el-button>
                <el-button
                  type="text"
                  size="mini"
                  @click="() => remove(node, data)">
                  删除
                </el-button>
              </span>
      </span>
    </el-tree>
  </div>
    <el-dialog title="分类" :visible.sync="dialog">
        <el-form label-position="left" label-width="80px">
          <el-form-item label="活动名称"  >
               <el-input v-model="modifyParam.name"></el-input>
          </el-form-item>
           <el-form-item label="图片">
                <uploadImage :uploadFiles="uploadFiles" :maxNum="1" style="text-align:left"/>
          </el-form-item>
        </el-form>
          <div slot="footer" class="text-align:center">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="modify">确 定</el-button>
        </div>
      </el-dialog>
</div>
 </el-card>
</template>
<script>
  let id = 1000;
  import {categorylist,categorymodify,categoryDele,categoryForm} from "@/libs/api.js"
  import uploadImage from "@/components/upload/UploadImage.vue";
  export default {
    components: {
      uploadImage
    },
    data() {
      return {
        data: [],
        dialog:false,
        modifyParam:{"name":""},
        doData:null,
        uploadFiles: [],
        baseImage:""
      }
    },

    methods: {
      update(node,data) {
          this.doData=data;
          this.modifyParam.name=data.label;
          this.modifyParam.id=data.id;
          this.modifyParam.parentId=data.parentId;
          this.dialog=true;
          var file = {
            name: data.icon,
            url: this.$http.baseUrl + "/file/show/" + data.icon,
            statuss:"success"
          };
          this.uploadFiles=[];
          this.uploadFiles.push(file);
      },
      cancel(){
           this.dialog = false;
           this.modifyParam={"name":""}
      },
  
      modify(){
        //非添加根节点
        if(this.doData){
          //添加
          if(!this.modifyParam.id){
             this.modifyParam.parentId=this.doData.id;
          }
        }

        let fileList = this.uploadFiles;
        let param = new FormData();
        param.append("parentId", this.modifyParam.parentId || "");
        param.append("id", this.modifyParam.id || "");
        param.append("name", this.modifyParam.name);
        if(fileList && fileList.length>0){
            if (fileList[0].status != "success") {
              param.append("files", fileList[0].raw);
            } else {
              param.append("icon", fileList[0].name);
            }
        }
       
        categoryForm(param).then((res) => {
            this.$util.success();
            this.dialog=false;
            const newChild = {id:res.id, label: this.modifyParam.name, children: [] ,icon:res.icon,parentId:res.parentId}; 
            if(this.doData){
              if(!this.modifyParam.id){//添加
                  if (!this.doData.children) {
                    this.$set(this.doData, 'children', []);
                  }
                  this.doData.children.push(newChild);
              }else{
                this.doData.label=this.modifyParam.name;
                this.doData.name=this.modifyParam.name;
              } 
  
            }else{
               if(!this.modifyParam.id){//添加
                   this.data.push(newChild);
                }else{
                   for(var i=0;i<this.data.length;i++){
                       if(this.data[i].id==this.modifyParam.id){
                          this.data[i].label=this.modifyParam.name;
                          this.data[i].name=this.modifyParam.name;
                          this.data[i].icon=res.icon;
                           this.data[i].parentId=res.parentId;
                       }
                   }
                }
               
            }
            this.dialog=false;
            this.modifyParam={"name":""}
         
        });
      },

      remove(node, data) {
         categoryDele(data.id).then((res) => {
            const parent = node.parent;
            const children = parent.data.children || parent.data;
            const index = children.findIndex(d => d.id === data.id);
            children.splice(index, 1);
         })
       
      }
    },
    mounted(){
      this.baseImage=this.$http.baseImage;
      categorylist().then((res) => {
         this.data=res;
      })
    },
  };
</script>

<style>
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
</style>